<template>
  <div class="login-wrap">
    <div class="ms-login">

      <el-form v-loading="loading" element-loading-text="Loading..." :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)"
        :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <div class="ms-title">梓晨影院管理系统</div>
        <el-form-item prop="managerId">
          <el-input v-model="param.username" placeholder="请输入用户名">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="param.password" @keyup.enter="submitForm()">
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "Login",
  setup() {
    const store = useStore();
    const route = useRouter();
    let loading = ref(false)
    const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
    let login = ref();
    let param = reactive({
      username: "",
      password: "",
    });
    let rules = reactive({
      username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    });

    let submitForm = function () {
      login.value.validate(async (valid) => {
        if (!valid) {
          return;
        } else {
          loading.value = true
          let user = new URLSearchParams();
          user.append("username", param.username);
          user.append("password", param.password);
          let res = await axios.post("/manager/login", user);
          console.log("res", res);
          res = res.data
          
          loading.value = false
          if (res.code != 200) {
            return ElMessage({
              message: res.message,
              type: "error",
            });
          } else {
            store.state.tags.tagList = [
              { name: '首页', path: '/welcome' }
            ]
            localStorage.setItem("token", res.data.authorization);
            console.log("loginres", res.data.menuList);
            localStorage.setItem("menuList", JSON.stringify(res.data.menuList));
            store.commit("menu/SET_ROUTE_STATE", false)
            localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
            sessionStorage.setItem("activePath", "/");


            ElMessage({
              message: res.data.userInfo.managerName + ",欢迎回来",
              type: "success",
            });
            let realRoute = route.currentRoute.value
            let path = realRoute.query.redirect
            console.log('path..', path)
            route.replace((!path || path == '/') ? '/' : path)
          }
        }
      });
    }

    return {
      param,
      rules,
      submitForm,
      login,
      loading,
      svg
    };
  },
};
</script>


<style scoped>
.login-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/login-bg.jpg");
  background-size: cover;
  align-items: center;
  justify-content: center;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #000000;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  width: 23%;
  /* height: 37%; */
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px;

}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #000000;
}
</style>
